<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org" layout:decorator="layouts/simpleLayout">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div layout:fragment="bodyContent">
        <div class="row" th:if="${#lists.isEmpty(imagePaths)}">
            <div class="col-md-12 col-xs-18 text-center">
                <strong>No item</strong>
            </div>
        </div>
        <div class="row" th:each="ip : ${imagePaths}">
            <div class="col-md-10 col-xs-15 text-center">
                <img th:src="'/images/upload/' + ${ip}" class="img-middle" alt="picture">
            </div>
            <div class="col-md-2 col-xs-3">
                <a href="#" onclick="onDeleteDetailImage(this)" th:attr="data-id=${id},data-img=${ip}" class="img-remove-glyph">
                    <span class="glyphicon glyphicon-remove"/>
                </a>
            </div>
        </div>
        <form method="post" action="/cate/createMore" enctype="multipart/form-data" hidden id="add_new_img_form">
            <input type="hidden" name="id" th:value="${id}"/>
            <div class="form-group">
                <div class="row">
                    <div class="col-md-10 col-xs-15">
                        <input type="file" accept="image/png,image/jpeg" name="newImg"/>
                    </div>
                    <div class="col-md-2 col-xs-3">
                        <input type="submit" value="Add"/>
                    </div>
                </div>
            </div>
        </form>
        <div class="form-group">
            <input type="button" id="btn_add_more_img" class="btn btn-success btn-block" onclick="onAddMoreImage()" value="Add more images"/>
        </div>

        <script src="/js/hzy-1.0/hzy-cate.js"></script>

        <script>
            function onAddMoreImage(){
                $("#add_new_img_form").show();
                $("#btn_add_more_img").enable(false);
            }
        </script>

    </div>

</body>
</html>